<template>
  <div id="app">
    <div class="container">
      <div class="header">
        <h6>能电e家--零碳园区光储充数据管理系统</h6>
      </div>
      <!-- <ul class="carousel-nav">
        <li
          v-for="(item, index) in 4"
          :key="index"
          :class="{ on: index == activeIndex }"
          @click="setActiveItem(index)"
        ></li>
      </ul>
      <ul class="carousel-nav carousel-nav2">
        <li
          v-for="(item, index) in 4"
          :key="index"
          :class="{ on: index == activeIndex }"
          @click="setActiveItem(index)"
        ></li>
      </ul> -->
      <el-carousel
        ref="carousel"
        loop
        indicator-position="none"
        :interval="interval"
        :autoplay="autoplay"
        :initial-index="initial"
        height="100vh"
        @change="carouselChange"
      >
        <el-carousel-item>
          <Home ref="home" />
        </el-carousel-item>
        <el-carousel-item>
          <Interior ref="interior" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import Interior from "./components/Interior.vue";
// import { systemPage } from "/src/api/index";
export default {
  name: "App",
  components: {
    Home,
    Interior,
  },
  data() {
    return {
      // 是否轮播
      autoplay: false,
      // 自动切换的时间间隔，单位为毫秒
      interval: 20000,
      // 初始index
      initial: 0,
      // 当前页面
      activeIndex: 0,
    };
  },
  computed: {},

  created() {
    // this.getData();
  },

  mounted() {
    // this.drawChart();
  },

  methods: {
    getData() {
      systemPage().then((res) => {
        // 大屏轮播间隔
        this.interval = res.slide_time * 1000;
        // 是否开启轮播
        // this.autoplay = res.is_slide == "1" ? true : false;
        // 图表交互间隔
        this.$refs.home.chart_time = res.chart_interaction_time * 1000 + 100;
        this.$refs.interior.chart_time =
          res.chart_interaction_time * 1000 + 100;
        this.$refs.coopera.chart_time = res.chart_interaction_time * 1000 + 100;
        this.$refs.map.chart_time = res.chart_interaction_time * 1000 + 100;
      });
    },

    setActiveItem(index) {
      this.$refs.carousel.setActiveItem(index);
    },

    carouselChange(event) {
      //     console.log(event);
      this.activeIndex = event;
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Alibaba PuHuiTi 2;
}

.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* background: url(/src/assets/bg.jpg) center/cover no-repeat; */
  background: #10202b;
}
.container > .el-carousel > .el-carousel__container > .el-carousel__arrow {
  width: 80px;
  height: 80px;
  font-size: 28px;
}

.header {
  width: 100%;
  height: calc((80 / 1080) * 100%);
  background: url(/src/assets/head.png) center bottom/100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}
.header h6 {
  display: inline-block;
  font-weight: normal;
  font-size: 34rem;
  /* color: #fff; */
  text-align: center;
  letter-spacing: 4rem;
  color: #47d5f1;
  /* background: -webkit-gradient(
    linear,
    left center,
    right center,
    color-stop(0, #0072ff),
    color-stop(0.5, #00eaff),
    color-stop(1, #01abff)
  ); */
  /* background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent; */
}

.warpper {
  position: relative;
  top: 10vh;
  width: 100%;
  height: 90vh;
  padding: 20px 20px 10px;
}

.content {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}

.round {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.round span::before,
.round span::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
}

.round span:nth-child(1):before {
  transform: rotate(90deg);
  background: url(./assets/round.png) center/cover no-repeat;
  top: 0;
  right: 0;
}
.round span:nth-child(1)::after {
  background: url(./assets/round.png) center/cover no-repeat;
  top: 0;
  left: 0;
}
.round span:nth-child(2):before {
  transform: rotate(180deg);
  background: url(./assets/round.png) center/cover no-repeat;
  bottom: 0;
  right: 0;
}
.round span:nth-child(2)::after {
  transform: rotate(-90deg);
  background: url(./assets/round.png) center/cover no-repeat;
  bottom: 0;
  left: 0;
}

.title {
  width: 38px;
  height: 100%;
  background-color: #01040e;
  position: relative;
  font-size: 18rem;
  color: #fff;
  letter-spacing: 2rem;
  writing-mode: tb-rl;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title::before {
  content: "";
  display: block;
  width: 18px;
  height: 4px;
  border-radius: 4px;
  margin-bottom: 15rem;
}

.blue::before {
  background-color: #1f66f0;
}
.red::before {
  background-color: #ff5945;
}
.green::before {
  background-color: #47de93;
}
.yellow::before {
  background-color: #f0de1f;
}

.box {
  width: calc(100% - 40px);
  height: 100%;
  background: url(./assets/boxBg.png);
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.chart {
  width: 100% !important;
  height: 100% !important;
  /* overflow: hidden; */
}

.carousel-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: fixed;
  top: 40rem;
  left: 8%;
  z-index: 9;
}
.carousel-nav2 {
  left: auto;
  right: 8%;
}
.carousel-nav li {
  margin: 0 7rem;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  border: 2rem solid #8efdfd;

  cursor: pointer;
}
.carousel-nav li.on {
  background-color: #8efdfd;
  box-shadow: 0 0 6rem #8efdfd;
}

.flex {
  display: flex;
  /* 新增 */
  width: 100%;
}

.dis_aic {
  display: flex;
  align-items: center;
}

.dis_jsb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dis_jsb2 {
  display: flex;
  justify-content: space-between;
}

.tac {
  text-align: center;
}

.m8 {
  margin-top: 8px;
}
</style>
